@prefixCls: ~'scrollbar';

.@{prefixCls} {
  --scrollbar-bg-color: #dddee0;
  // --lightd-scrollbar-bg-color: #c1c1c1;
  --scrollbar-bg-hover-color: #a8a8a8;
  --scrollbar-width: 10px;
  --scrollbar-border-radius: 7px;

  overflow: auto;
  content-visibility: auto;
  contain-intrinsic-size: 300px;

  /* 兼容火狐浏览器 */
  scrollbar-color: var(--scrollbar-bg-color) transparent; /* 滑块颜色  滚动条背景颜色 */
  scrollbar-width: thin; /* 滚动条宽度有三种：thin、auto、none */

  /* 通用滚动条样式 */
  &::-webkit-scrollbar {
    width: var(--scrollbar-width);
  }
 
  /* 滚动条轨道颜色和背景颜色 */
  &::-webkit-scrollbar-track {
    background-color: transparent;
  }

  /* 滚动条滑块颜色和背景颜色 */
  &::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-bg-color);
    background-clip: padding-box;
    border: 3px solid transparent;
    border-radius: var(--scrollbar-border-radius);
    transition: all 0.5s;
  }

  /* 鼠标悬停在滚动条滑块上时的样式 */
  &::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-bg-hover-color);
  }
}

.@{prefixCls}.@{prefixCls}-hide {
  /* 通用滚动条样式 */
  &::-webkit-scrollbar {
    display: none;
  }

  /* 兼容火狐浏览器 */
  scrollbar-width: none; /* 滚动条宽度有三种：thin、auto、none */
}

.@{prefixCls}.@{prefixCls}-hover {
  scrollbar-color: transparent transparent; /* 滑块颜色  滚动条背景颜色 */

  &:hover {
    scrollbar-color: var(--scrollbar-bg-color) transparent; /* 滑块颜色  滚动条背景颜色 */
  }

  &:hover::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-bg-color);
  }

  &::-webkit-scrollbar-thumb {
    background-color: transparent;
  }
}
/* Safari and Chrome */
@media screen and (min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
  .@{prefixCls} {
    overflow: auto;

    /* 通用滚动条样式 */
    &::-webkit-scrollbar {
      width: var(--scrollbar-width);
    }

    /* 滚动条轨道颜色和背景颜色 */
    &::-webkit-scrollbar-track {
      background-color: transparent;
    }

    /* 滚动条滑块颜色和背景颜色 */
    &::-webkit-scrollbar-thumb {
      background-color: var(--scrollbar-bg-color);
      background-clip: padding-box;
      border: 3px solid transparent;
      border-radius: var(--scrollbar-border-radius);
    }

    /* 鼠标悬停在滚动条滑块上时的样式 */
    &::-webkit-scrollbar-thumb:hover {
      background-color: var(--scrollbar-bg-hover-color);
    }
  }

  .@{prefixCls}.@{prefixCls}-hide {
    /* 通用滚动条样式 */
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .@{prefixCls}.@{prefixCls}-hover {
    &:hover::-webkit-scrollbar-thumb {
      background-color: var(--scrollbar-bg-color);
    }

    &::-webkit-scrollbar-thumb {
      background-color: transparent;
    }
  }
}
